<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>an-link | an-ui</title>
    <style>
        html {
            box-sizing: border-box;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        html:focus {
            outline: none;
        }

        *:focus {
            outline: inherit;
        }

        ul {
            all: unset;
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin-left: -20px;

            & li {
                width: 150px;
                font-weight: 600;
                font-size: 30px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                margin-left: 20px;

                & p {
                    font-size: 14px;
                    font-weight: normal;
                    word-break: break-all;
                }
            }
        }
    </style>
    <link rel="stylesheet" href="style.css">
    <script type="module" src="/icons/close.js"></script>
    <script type="module" src="/icons/check-circle-fill.js"></script>
    <script type="module" src="/icons/error-warning-fill.js"></script>
    <script type="module" src="/icons/info-fill.js"></script>
    <script type="module" src="/icons/loading.js"></script>
    <script type="module" src="/icons/question-fill.js"></script>
</head>

<body>
    <ul>
        <li>
            <an-icon-close></an-icon-close>
            <p>
                an-icon-close
            </p>
        </li>
        <li>
            <an-icon-loading></an-icon-loading>
            <p>
                an-icon-loading
            </p>
        </li>
    </ul>

    <ul>
        <li>
            <an-icon-check-circle-fill></an-icon-check-circle-fill>
            <p>
                an-icon-check-circle-fill
            </p>
        </li>
        <li>
            <an-icon-error-warning-fill></an-icon-error-warning-fill>
            <p>
                an-icon-error-warning-fill
            </p>
        </li>
        <li>
            <an-icon-info-fill></an-icon-info-fill>
            <p>
                an-icon-info-fill
            </p>
        </li>

        <li>
            <an-icon-question-fill></an-icon-question-fill>
            <p>
                an-icon-question-fill
            </p>
        </li>
    </ul>
</body>

</html>